<script setup lang="ts">
defineOptions({
  name: "abnormalInfoList"
});

import ReTextTooltip from "@/components/ReTextTooltip";

const pageNum = defineModel("pageNum", { type: Number, default: 0 });

const props = withDefaults(defineProps<{ data?: Array<any>; height_value?: string; isShowMore?: boolean }>(), {
  data: () => [],
  height_value: "100%",
  isShowMore: false
});

const emits = defineEmits(["loadMore"]);

const colors = new Map([
  [
    "ALARM_ONE",
    {
      label: "一级",
      tagColor: "#EF4444FF",
      backgroundColor: "#FFD6D6"
    }
  ],
  [
    "ALARM_TWO",
    {
      label: "二级",
      tagColor: "#FF781BFF",
      backgroundColor: "##FEE7D7"
    }
  ],
  [
    "ALARM_THREE",
    {
      label: "三级",
      tagColor: "#F2B119FF",
      backgroundColor: "##FEF3D7"
    }
  ]
]);

const loadMoreHandler = () => {
  pageNum.value++;
  emits("loadMore", pageNum.value);
};
</script>

<template>
  <px-scrollbar v-if="data?.length">
    <div class="list-content">
      <div
        v-for="item in data"
        :key="item.alarm_id"
        class="list-content-item"
        :style="{ backgroundColor: colors.get(item.alarmLevel) ? colors.get(item.alarmLevel).backgroundColor : '#f5f5f5' }"
      >
        <div
          class="list-content-item-tag"
          :style="{ backgroundColor: colors.get(item.alarmLevel) ? colors.get(item.alarmLevel).tagColor : '#e9e9eb' }"
        >
          {{ colors.get(item.alarmLevel)?.label || item?.alarmLevel || "--" }}
        </div>
        <div class="list-content-item-msg">
          <ReTextTooltip :content="item.alarmMsg" :style="{ fontSize: '12px', color: '#333' }" />
        </div>
        <div class="list-content-item-time">
          {{ item.alarmTime }}
        </div>
      </div>
    </div>
    <div v-if="isShowMore" class="load-more" @click="loadMoreHandler">点击加载更多。。</div>
  </px-scrollbar>
  <px-empty v-else class="px-empty-common" />
</template>

<style lang="scss" scoped>
.px-scrollbar {
  width: 100%;
  height: v-bind(height_value);

  .list-content {
    .list-content-item {
      box-sizing: border-box;
      display: flex;
      gap: 12px;
      align-items: center;
      justify-content: space-between;
      padding: 8px;
      margin-top: 12px;
      border-radius: 6px;

      &:first-of-type {
        margin-top: 0;
      }

      .list-content-item-tag {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 26px;
        padding: 0 10px;
        font-size: 14px;
        line-height: 1;
        color: #fff;
        background-color: #e9e9eb;
        border-radius: 16px;
      }

      .list-content-item-msg {
        flex: 1;
        width: 0;
      }

      .list-content-item-time {
        font-size: 12px;
        color: #333;
      }
    }
  }

  .load-more {
    height: 36px;
    margin-top: 12px;
    font-size: 12px;
    line-height: 36px;
    color: #999;
    text-align: center;
    letter-spacing: 2px;

    &:hover {
      cursor: pointer;
      background-color: #fbfbfb;
    }
  }
}
</style>
